/* appWrapper.css — 全局样式文件 */

/* 遮罩层背景 + 呼吸效果 */
.splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色，可按需调整 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  animation: breathing 2s ease-in-out infinite;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* 呼吸效果：背景透明度循环变化 */
@keyframes breathing {
  0%   { background-color: rgba(255, 255, 255, 0.85); }
  50%  { background-color: rgba(255, 255, 255, 1); }
  100% { background-color: rgba(255, 255, 255, 0.85); }
}

/* 渐隐消失（添加 fade-out 类时触发） */
.splash-overlay.fade-out {
  opacity: 0;
  visibility: hidden; /* 等动画结束后可以隐藏以避免挡点鼠标事件 */
  pointer-events: none;
}

/* logo 样式与微缩放呼吸 */
.splash-logo {
  width: 80px;
  height: 80px;
  animation: logoPulse 2s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Logo 缓慢放大缩小 */
@keyframes logoPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* 文本样式 */
.splash-text {
  margin-top: 18px;
  font-size: 16px;
  color: #666;
  letter-spacing: 0.2px;
  user-select: none;
}

/* 可选：为遮罩层加一层模糊内容的效果（若需要） */
.splash-overlay.blur-backdrop {
  backdrop-filter: blur(4px);
}

/* 响应式：在小屏幕上缩小 logo */
@media (max-width: 480px) {
  .splash-logo {
    width: 64px;
    height: 64px;
  }

  .splash-text {
    font-size: 14px;
  }
}
